<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D翻页效果测试</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            perspective: 1000px;
        }

        .book-container {
            position: relative;
            width: 400px;
            height: 600px;
            transform-style: preserve-3d;
        }

        .page {
            position: absolute;
            transform-origin: left;
            width: 100%;
            height: 100%;
            background-color: white;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            backface-visibility: hidden;
            transition: transform 1s ease;
        }

        .page:nth-child(1) {
            z-index: 4;
            background-color: aqua;
        }

        .page:nth-child(2) {
            z-index: 3;
            background-color: rgb(255, 255, 170);
        }

        .page:nth-child(3) {
            z-index: 2;
            background-color: rgb(255, 170, 255);
        }

        .page:nth-child(4) {
            z-index: 1;
            background-color: rgb(170, 255, 255);
        }

        .page.flipped-left {
            transform: rotateY(-180deg);
        }

        .page.flipped-right {
            transform: rotateY(180deg);
        }

        .controls {
            position: absolute;
            bottom: 20px;
            display: flex;
            gap: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="book-container">
        <div class="page" data-page="1">
           这是书籍的开篇内容。
            这里开始介绍书籍的主题。
           书籍将带领你探索新知识。
           每一页都有精彩的内容。
           学习从这里开始。
           希望你享受阅读过程。
           知识是无穷无尽的宝藏。
           不断探索才能发现更多。
           让我们一起开启阅读之旅。
           祝你阅读愉快！
        </div>
        <div class="page" data-page="2">
           现在进入第二页内容。
           这里会有新的知识点。
           学习就像攀登高峰。
           每一步都有收获。
           坚持就是胜利。
           知识改变命运。
           阅读是成长的阶梯。
           保持好奇心很重要。
           思考让知识更牢固。
           继续加油，你很棒！
        </div>
        <div class="page" data-page="3">
           欢迎来到第三页。
           知识的海洋无尽头。
           探索未知的乐趣无穷。
           学习是一生的旅程。
           每一次阅读都是进步。
           与书籍为伴，不孤单。
           用知识武装自己。
           梦想从阅读开始。
           让书籍照亮前行的路。
           享受阅读带来的快乐。
        </div>
        <div class="page" data-page="4">
           最后来到第四页。
           感谢你坚持阅读到这里。
           知识已在你心中扎根。
           继续阅读，不断成长。
           阅读是最好的投资。
           愿书籍成为你的挚友。
           期待你更多的阅读收获。
           阅读让生活更美好。
           知识是力量的源泉。
           本次阅读之旅暂告段落。
        </div>
    </div>
    <div class="controls">
        <button id="prev-page">向左翻页</button>
        <button id="next-page">向右翻页</button>
    </div>

    <script>
        const pages = document.querySelectorAll('.page');
        const prevPageBtn = document.getElementById('prev-page');
        const nextPageBtn = document.getElementById('next-page');
        let currentPage = 1;

        nextPageBtn.addEventListener('click', () => {
            if (currentPage < pages.length) {
                const currentPageElement = pages[currentPage - 1];
                currentPageElement.classList.add('flipped-left');
                currentPage++;
            }
        });

        prevPageBtn.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                const currentPageElement = pages[currentPage - 1];
                currentPageElement.classList.remove('flipped-left');
            }
        });
    </script>
</body>
</html>
